<template>
  <div class="containerBox">
    <div class="bgcStyle" >
      新增预定
    </div>
    <div class="insertBox">
      <div>
        <el-form :model="formList" :rules="formRules" ref="ruleForm">
          <el-form-item label="" prop="bookingName">
              <span style="color: red">*</span> <span >预订人</span>    <el-input v-model="formList.bookingName" autocomplete="off" placeholder="请输入预订人"></el-input>
            </el-form-item>
          <el-form-item label="" prop="number" >
            <span style="color: red">*</span>  <span >人数</span>   <el-input v-model.number="formList.number" autocomplete="off" type="number" placeholder="请输入人数"></el-input>
          </el-form-item>
          <el-form-item label="" prop="bookingTime" >
            <span style="color: red">*</span>  <span >预定日期</span>   <input type="date" v-model="formList.bookingTime" placeholder="选择日期" class="inputData">
          </el-form-item>
          <el-form-item label="" prop="eatTime"  >
            <span style="color: red">*</span>  <span >预定餐</span>  <el-radio-group v-model="formList.eatTime ">
              <el-radio label="中餐"></el-radio>
              <el-radio label="晚餐"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="" prop="mealLabel" >
            <span style="color: red">*</span><span style="margin-left: 5px">餐标</span>    <el-input v-model="formList.mealLabel" autocomplete="off" placeholder="请输入餐标" ></el-input>
<!--            <el-select v-model="formList.mealLabel" placeholder="请选择活动区域" class="inputMealLabel">-->
<!--              <el-option label="餐标一" value="one"></el-option>-->
<!--              <el-option label="餐标二" value="two"></el-option>-->
<!--              <el-option label="餐标三" value="three"></el-option>-->
<!--            </el-select>-->
          </el-form-item>
        </el-form>
      </div>
      <div class="dialogBox">
        <el-button @click="pushTo">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>

    </div>
  </div>
</template>

<script>
  import {bookInsert} from "@/request/request.js";
  import {Message} from 'element-ui';
  export default {
    data() {
      return {
        formRules:{
          bookingName: [
            { required: true, message: '请输入预定人', trigger: 'blur' },
          ],
          number: [
            { required: true, message: '请输入人数', trigger: 'blur' },
          ],
          bookingTime: [
            { required: true, message: '请输入预定时间', trigger: 'blur' },
          ],
          mealLabel: [
            { required: true, message: '请输入餐标', trigger: 'blur' },
          ],
          eatTime: [
            { required: true, message: '请输入预定餐', trigger: 'blur' },
          ],
        },
        formList: {
          bookingName:'' ,
          number: '',
          bookingTime: '',
          mealLabel: '',
          eatTime: ''
        },
      };
    },
    created() {
    this.formList.bookingName =localStorage.getItem('nickName')
      },
    methods: {
      pushTo(){
        this.$router.push('/')
      },
      submit() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            bookInsert(this.formList).then(res => {
                if (res.code ===200) {
                  this.$message.success('新增成功');
                  this.$router.push('/')
                } else if (res.code ===500 ){
                  Message({message: res.msg, type: 'warning'})
                }else  {
                  Message({message: res.msg, type: 'warning'})
                }
              }
            )
          } else {
            return false;
          }
        });
      },
    }
  };
</script>

<style scoped>
  .containerBox {
    display: flex;
    flex-direction: column;
    /*width: 100vw;*/
  }
  .bgcStyle{
    color: white;
    font-size: 32px;
    line-height: 50px;
    padding: 0px 20px;
    margin: 0 20px;
    background-color: #409eff;
    height: 50px;
    border-radius: 20px  20px 0px 0px;
  }

  .insertBox {
    box-shadow: 5px 5px 20px 1px rgba(114, 130, 138, 0.1);
    margin: 0px 20px;
    padding: 20px;
    border-radius:  0px   0px 20px 20px;
    display: flex;
    flex-direction: column;
  }

  .dialogBox {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .inputData {
    width: 95%;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 10px;
    color: #65666a;
    font-size: 15px;
  }

  /*.inputMealLabel {*/
  /*  width: 100%;*/
  /*}*/
</style>
